<template>
	<div class="section com-experience">
		<h3 class="section-title text-center">{{title}}</h3>
		<div class="wrapper wrapper-fixed com-exp-swiper-box">
			<div class="swiper-container  com-exp-swiper">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide" v-for="item in slides">
			        	<nuxt-link class="img-link zoom-box" :to="/experience/+item.id"><img :src="item.thumbnail ? item.thumbnail : '~assets/images/example/destination_detail_list_demo.jpg'" alt=""></nuxt-link>
                        <div class="text-area text-center">
			        		<h3 class="title"><nuxt-link :to="/experience/+item.id">{{item.title}}</nuxt-link></h3>
			        		<div class="detail">{{item.excerpt}}</div>
							<div class="tags">
								<span class="tag"><i class="iconfont icon-rili"></i>{{item.timespan}}</span>
								<span class="tag"><i class="iconfont icon-clock"></i>{{item.duration}}</span>
							</div>
							<div><nuxt-link class="link" :to="/experience/+item.id">了解详情</nuxt-link></div>
			        	</div>
			        </div>
			    </div>
			</div>
			<div class="exp-button-prev"><i class="fa fa-angle-left"></i></div>
			<div class="exp-button-next"><i class="fa fa-angle-right"></i></div>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
import Swiper from 'Swiper'
import 'swiper/dist/css/swiper.min.css'
export default{
  props: {
    title: String,
    slides: Array
  },
  mounted: () => {
    let $expSwiper = $('.com-exp-swiper')
    let $nextBtn = $expSwiper.parent('.com-exp-swiper-box').find('.exp-button-next')
    let $prevBtn = $expSwiper.parent('.com-exp-swiper-box').find('.exp-button-prev')
    this.expSwiper = new Swiper($expSwiper, {
      prevButton: $prevBtn,
      nextButton: $nextBtn,
      slidesPerView: 2,
      breakpoints: {
        640: {
          slidesPerView: 1
        }
      }
    })
  }
}
</script>
<style lang="less">
@import "~assets/css/variable.less";
@import "~assets/css/mixins.less";

.section-title {
    font-size: 36px;
    color: #000;
    font-weight: normal;
    margin-bottom: 1em;
}
.com-experience{	
	padding:66px 0 90px 0;
	.img-link{display:block;}
	.com-exp-swiper-box{
		position:relative;
	}
	.com-exp-swiper{
		margin-left:-15px;
		margin-right:-15px;
	}
	.swiper-slide{
		padding:0 15px;
		padding-bottom:15px;
		.title{
			font-weight:normal;
			font-size:28px;
			line-height:1.2;
			color:#333;
			margin-bottom:0.5em;
			.text-overflow;
		}
		.tags{
			font-size:14px;
			color:#676767;
			padding:0.5em 0;
			i{padding-right:0.3em;}
			.tag{padding:0 0.5em;}
		}
		.detail{
			.text-overflow-lines(@line-num:2, @line-height:2em);
		}
		.link{
			display:inline-block;
			font-size:16px;
			line-height:1.5;
			padding:0.5em 2em;
			background-color:@red;
			color:#fff;
			&:hover{
				text-decoration:none;
				background-color:darken(@red, 5%);
			}
		}
		.text-area{
			width:430/570*100%;
			margin:0 auto;
			margin-top:-70px;
			position:relative;
			z-index:2;
			padding:30px;
			font-size:16px;
			line-height:2;
			color:#666;
			background-color:#fff;
			box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
		}
	}
	.exp-button-prev,.exp-button-next{
		position:absolute;
		cursor:pointer;
		top:50%;
		z-index:99;
		color:#666;
		//background-color:@red;
		width:2em;
		text-align:center;
		line-height:1;
		margin-top:-0.5em;
		i{font-size:40px;}
		&:hover{
			color:#000;
		}
		&.swiper-button-disabled{
			opacity:0.5;
			cursor:default;
			&:hover{color:#666;}
		}
	}
	.exp-button-prev{left:-40px;}
	.exp-button-next{right:-40px;}
	@media screen and (max-width:1270px){
		.exp-button-prev{left:0;}
		.exp-button-next{right:0;}
	}
	@media screen and (max-width:1024px){
		.com-exp-swiper{
			margin-left:-10px;
			margin-right:-10px;
		}
		.swiper-slide{
			padding:0 10px;
			.title{
				font-size:24px;
			}
			.tags{
				.tag{display:block;}
			}
			.link{font-size:14px;}
			.text-area{
				width:500/570*100%;
				margin-top:-50px;
				position:relative;
				z-index:2;
				padding:26px;
				font-size:14px;
			}
		}
	}
	@media screen and (max-width:1024px){
		padding:66*@rpx 0 90*@rpx 0;
	}
	@media screen and (max-width:640px){
		.com-exp-swiper{
			margin-left:0;
			margin-right:0;
		}
		.com-exp-swiper-box{
			padding-left:40px;
			padding-right:40px;
		}
		.swiper-slide{
			padding:0;
			padding-bottom:15px;
			.title{
				font-size:24px;
			}
			.link{font-size:14px;}
			.text-area{
				width:500/570*100%;
				margin-top:-50px;
				position:relative;
				z-index:2;
				padding:26px;
				font-size:14px;
			}
		}
	}
}
</style>



